<%@ page import="java.util.ArrayList" %>
<%@ page import="com.andy.sun.bean.Prospect" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>布局·计划</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="icon" href="images/12.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        body {
           background-color: #1a1818;
        }

        #layout {
            width: 100%;
            padding-bottom: 30px;
        }

        #layout_title {
            margin-top: -20px;
            width: 100%;
            text-align: center;
            padding: 30px 0px;
            font-size: 60px; /* 字体大小 */
            color: #f00000; /* 字体颜色 */
            border-bottom: 2px solid #f00000; /* 底部边框 */
            font-family: 华文行楷, 华文细黑, 黑体, 微软雅黑, Arial, sans-serif;

        }
        #layout_title > div{
            display: none;
        }

        #container {
            width: 90%;
            margin: 0 auto;
        }

        .bu_ju {
            background-color: #f1eec7;
            color: #255bc4;
            text-align: center;
            font-size: 20px; /* 字体大小 */
            border-radius: 5px; /* 圆角 */
            padding: 10px 3%; /* 内边距 */
            font-weight: bolder;
        }

        a:hover {
            text-decoration: none;
        }

        .bu_ju:hover {
            background-color: #ffffff;
            font-weight: bolder;
            color: #4c6df6; /* 字体颜色 */
            cursor: pointer; /* 鼠标经过样式 */
            border-bottom: 3px solid #f00000;
        }

        #andy_title_ul {
            text-align: center;
            margin-top: 20px;
        }

        #andy_title_ul li {
            display: inline-block;
            border-radius: 10px;
        }

        /*div年月周日相关布局样式*/

        #year_target, #month_target, #week_target, #day_target {
            position: relative;
            width: 95%;
            margin: 20px auto;
            border-radius: 15px;
            padding: 10px;
            font-size: 18px;
            overflow: hidden;
            display: none;
        }

        #year_target {
            background-color: #f9cece;
        }

        #month_target {
            background-color: #f2ebc5;
        }

        #week_target {
            background-color: #d0d0f9;
        }

        #day_target {
            background-color: #ffffff;
            display: block;
        }

        #year_target li, #month_target li, #week_target li, #day_target li {
            white-space: pre-wrap; /* 允许文本换行 */
            position: relative;
            overflow-wrap: break-word; /* 允许单词在边界处换行 */
            padding: 10px 5px;
            border-bottom: 5px double #f00000;
            margin: 5px 5px;
            font-family: 微软雅黑, Arial, sans-serif;
        }

        .upd {
            position: absolute;
            right: 80px;
        }

        .del {
            position: absolute;
            right: 20px;
        }

        #add_year_target, #add_month_target, #add_week_target, #add_day_target {
            float: right;
            font-size: 18px;
            padding: 5px 10px;
            border-radius: 10px;
            margin: 20px;
        }

        #addMottoModal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: fit-content;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 10px 10px 20px #474747;
            display: none;
        }

        #addMottoModal .modal-header {
            background-color: #eded63;
            color: #121af1;
            font-family: 微软雅黑;
        }

        #addMottoModal .modal-body {
            padding: 20px;
        }

        #addMottoModal .modal-footer {
            padding: 10px;
            text-align: center;
        }

        #addMottoModal input[type="text"] {
            width: 100%;
            height: 40px;
            padding: 10px;
            margin-bottom: 20px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            font-family: 微软雅黑;
        }

        #addMottoModal button[type="submit"], #addMottoModal button[type="button"] {
            width: 100px;
            height: 40px;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            font-family: 微软雅黑;
            cursor: pointer;
        }

        #motto {
            font-size: 24px;
            line-height: 30px;
            white-space: pre-wrap;
            resize: none;
        }
        @media (max-width: 768px) {
            #layout_title {
                font-size: 22px;
                padding: 30px 0px;
            }
            #addMottoModal {
                width: 80%;
            }
            #layout_title > div{
                display: block;
            }

            #addMottoModal button[type="submit"] {
                margin-left: 20px;
            }

            #addMottoModal button[type="button"] {
                margin-right: 20px;
            }
        }
        @media screen and (min-width: 768px) {
            #addMottoModal {
                width: 60%;
            }

            #addMottoModal button[type="submit"] {
                margin-left: 50px;
            }

            #addMottoModal button[type="button"] {
                margin-right: 50px;
            }
        }
    </style>
</head>
<body>
<%
    Object prospectList = session.getAttribute("prospectList");
    if (prospectList == null) {
        request.getRequestDispatcher("ProSpectServlet?what=query").forward(request, response);
    }
%>

<%-- 导航栏 --%>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="getTask.jsp" target="_parent">首页·计划管理</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a target="_parent" href="TaskLineServlet">任务成就</a></li>
                <li><a target="_parent" href="ProSpectServlet?what=query">布局·规划</a></li>
                <li><a target="_parent" href="URLServlet?what=query">重要网址</a></li>
                <li><a target="_parent" href="NoteServlet?what=query">重要记事</a></li>
                <li><a target="_parent" href="mottos.jsp">感悟·格言</a></li>
                <li><a target="_parent" href="bookNotes.jsp">读书笔记</a></li>

            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a target="_parent" id="login_out">
                    <% String uname = (String) session.getAttribute("uname");
                        String welcomeMessage = "欢迎,登录";
                        if (uname != null && !uname.isEmpty()) {
                            welcomeMessage = "欢迎," + uname + "[退出登录]";
                        }
                        out.print(welcomeMessage);
                    %>
                </a></li>
                <li><a target="_parent" href="regist.jsp">注册</a></li>
                <li><a target="_parent" href="#">会员中心</a></li>
                <li><a target="_parent" href="Contact_us.jsp">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>

<%-- 布局·规划 --%>
<div id="layout">
    <h1 id="layout_title">人生需要规划布局经营,<div></div> 必将收获不一样的自己!</h1>
    <div id="container">
        <ul id="andy_title_ul">
            <li role="presentation" value="year" class="bu_ju">年目标</li>
            <li role="presentation" value="month" class="bu_ju">月目标</li>
            <li role="presentation" value="week" class="bu_ju">周目标</li>
            <li role="presentation" value="day" class="bu_ju">天目标</li>
        </ul>
        <div id="target_container">
            <div id="year_target">
                <c:set var="pptList" value="${prospectList}"/>
                <ul>
                    <c:forEach items="${pptList}" var="ppt">
                        <c:if test="${ppt.moment != null && ppt.moment.equals('year')}">
                            <li id="target_${ppt.id}">${ppt.target}
                                <a class="upd" href="javascript:updateTarget('${ppt.id}','${ppt.moment}')">修改</a><a class="del" href="javascript:delTarget('${ppt.id}')">删除</a></li>
                        </c:if>
                    </c:forEach>
                </ul>
                <button type="button" id="add_year_target" class="btn btn-success"> 新 增 年 目 标</button>
            </div>
            <div id="month_target">
                <ul>
                    <c:forEach items="${pptList}" var="ppt">
                        <c:if test="${ppt.moment != null && ppt.moment.equals('month')}">
                            <li id="target_${ppt.id}">${ppt.target}
                                <a class="upd" href="javascript:updateTarget('${ppt.id}','${ppt.moment}')">修改</a><a class="del" href="javascript:delTarget('${ppt.id}')">删除</a></li>
                        </c:if>
                    </c:forEach>
                </ul>
                <button type="button" id="add_month_target" class="btn btn-success"> 新 增 月 目 标</button>
            </div>
            <div id="week_target">
                <ul>
                    <c:forEach items="${pptList}" var="ppt">
                        <c:if test="${ppt.moment != null && ppt.moment.equals('week')}">
                            <li id="target_${ppt.id}">${ppt.target}
                                <a class="upd" href="javascript:updateTarget('${ppt.id}','${ppt.moment}')">修改</a><a class="del" href="javascript:delTarget('${ppt.id}')">删除</a></li>
                        </c:if>
                    </c:forEach>
                </ul>
                <button type="button" id="add_week_target" class="btn btn-success"> 新 增 周 目 标</button>
            </div>
            <div id="day_target">
                <ul>
                    <c:forEach items="${pptList}" var="ppt">
                        <c:if test="${ppt.moment != null && ppt.moment.equals('day')}">
                            <li id="target_${ppt.id}">${ppt.target}
                                <a class="upd" href="javascript:updateTarget('${ppt.id}','${ppt.moment}')">修改</a><a class="del" href="javascript:delTarget('${ppt.id}')">删除</a></li>
                        </c:if>
                    </c:forEach>
                </ul>
                <button type="button" id="add_day_target" class="btn btn-success"> 新 增 天 目 标</button>
            </div>
        </div>
    </div>

</div>

<%--添加格言模块--%>
<div id="addMottoModal" class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 style="text-align: center;" class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <form id="addMottoForm" action="MottosServlet" method="post">
                <div class="form-group">
                    <label for="motto">规划内容</label>
                    <textarea id="motto" cols="30" maxlength="200" class="form-control" name="motto"
                              placeholder="请输入你的内容" rows="10"></textarea>
                </div>
            </form>
            <div class="modal-footer">
                <button id="add_close" type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                <button id="add_submit" type="submit" class="btn btn-info">提交</button>
            </div>
        </div>
    </div>
</div>
<span id="s_div" style="display: none">${show_div}</span>

</body>
<script>
    let add_moment = "day"; //默认添加年目标
    let moment = "day"; //默认显示年目标
    let id = 0; //默认添加目标的id
    let what = "add";
    let show_div = "day"; //默认显示年目标框
    show_div = $("#s_div").html()==""? "day":$("#s_div").html();
    $("#" +show_div+"_target").show().siblings().hide(); //隐藏其他目标框
    //把背景色,设置给对应的切换标签
    $("li[value=" + show_div + "]").css("background-color", $("#" + show_div + "_target").css("background-color")); //设置当前标签的背景色

    //修改目标
    function updateTarget(index,mt) {
        id = index;
        let target = $("#target_" + id).text().substring(0, $("#target_" + id).text().length - 10).trim();
        add_moment = mt;
        moment = mt=="year"? "年":mt=="month"? "月":mt=="week"? "周":"天";
        $("#addMottoModal").show(); // 显示添加格言模块
        $("#motto").val(target); // 显示修改的目标内容
        $("#addMottoModal h4").html(" 修 改 "+moment+" 目 标 规 划 ");
        what = "upd";
    }


    $("#add_day_target").click(function () {
        $("#addMottoModal").show(); // 显示添加格言模块
        $("#addMottoModal h4").html(" 添 加 天 目 标 规 划 ");
        add_moment = "day";
        what = "add";
    });
    $("#add_week_target").click(function () {
        $("#addMottoModal").show(); // 显示添加格言模块
        $("#addMottoModal h4").html(" 添 加 周 目 标 规 划 ");
        add_moment = "week";
        what = "add";
    });
    $("#add_month_target").click(function () {
        $("#addMottoModal").show(); // 显示添加格言模块
        $("#addMottoModal h4").html(" 添 加 月 目 标 规 划 ");
        add_moment = "month";
        what = "add";
    });
    $("#add_year_target").click(function () {
        $("#addMottoModal").show(); // 显示添加格言模块
        $("#addMottoModal h4").html(" 添 加 年 目 标 规 划 ");
        add_moment = "year";
        what = "add";
    });

    $("#add_close").click(function () {
        $("#addMottoModal").hide(); // 隐藏添加格言模块
        $("#motto").val("");
    });
    $("#add_submit").click(function () {
        var motto = $("#motto").val()
        $.ajax({
            url: "ProSpectServlet",
            type: "post",
            data: {"what": what,"target": motto, "moment": add_moment, "id": id,"show_div":show_div},
            datatype: "text",
            success: function (result) {
                if (result === "success") {
                    location.href = "ProSpectServlet?what=query"; // 刷新页面
                } else {
                    alert("提交失败!");
                }
            },
            error: function () {
                console.log("提交失败");
            }
        });
        $("#addMottoModal").hide(); // 隐藏添加格言模块
        $("#motto").val("");
    }); // 提交添加天规划



    //删除目标
    function delTarget(id) {
        let b = confirm("确定删除该目标?");
        if (b) {
            $.ajax({
                url: "ProSpectServlet",
                type: "post",
                data: {
                    "what": "del",
                    "id": id
                },
                datetype: "text",
                success: function (result) {
                    if (result == "success") {
                        $("#target_" + id).remove();
                    } else {
                        alert("删除失败!");
                    }
                },
                error: function () {
                    alert("异步访问失败!");
                }
            });
        }
    }


    //退出登录
    $("#login_out").click(function () {
        let b = confirm("确定退出当前账号的登录吗?");
        if (b) {
            //删除浏览器中的cookie信息
            document.cookie = "task_uid=;expires=" + new Date(0).toUTCString();
            document.cookie = "task_uname=;expires=" + new Date(0).toUTCString();
            location.href = "login.jsp";
        }
    });

    //切换四个目标框,显示和隐藏
    let click = $("#andy_title_ul > li").click(function () {
        let target = $(this).attr("value").toLowerCase();
        show_div = target; // 切换显示的目标框
        $("#" + target + "_target").show().siblings().hide(); //隐藏其他目标框
        //把背景色,设置给对应的切换标签
        $("li[value=" + target + "]").css("background-color", $("#" + target + "_target").css("background-color")); //设置当前标签的背景色
    });

</script>
</html>
